/*
 * @Date: 2023-12-20 14:51:11
 * @LastEditors: lyx
 * @LastEditTime: 2024-02-23 16:17:09
 * @FilePath: \taro-template3\src\components\MsgActionPup\index.tsx
 * @Description: 长按菜单
 */
import { View } from "@tarojs/components";
import styles from "./index.module.scss";
import cName from "classnames";
import useMsgActionPup from "./hooks/useMsgActionPup";
import { Toast } from "@nutui/nutui-react-taro";
import { MSG_ACTION_PUP_TOAST_ID } from "./hooks/store";

function MsgActionPup(props: IMsgActionPup) {
  const { mode = 'large', actionList = [] } = props;

  const msgActionPupInst = useMsgActionPup(props);
  return (
    <>
      <Toast id={MSG_ACTION_PUP_TOAST_ID} />
      <View
        className={cName(styles["action-shade"], {
          [styles["show-shade"]]: msgActionPupInst.show,
        })}
        onClick={msgActionPupInst.closePup}
      >
        <View
          className={cName(styles["action-wrapper"], {
            [styles["show"]]: msgActionPupInst.show,
            [styles["up-target"]]: msgActionPupInst.upTarget,
            [styles["down-target"]]: !msgActionPupInst.upTarget,
          })}
          style={msgActionPupInst.popStyle}
          onClick={msgActionPupInst.cancelPup}
        >
          <View
            className={cName(styles["action-items"], {
              [styles["min-items"]]: mode === "mini",
            })}
          >
            {actionList.map((item) => (
              <View
                className={cName(styles["action-item"], {
                  [styles["mini-items"]]: mode === "mini",
                })}
                key={item.key}
                onClick={() => {
                  msgActionPupInst.handleActionClick(item);
                }}
              >
                {item.icon}
                {item.title}
              </View>
            ))}
          </View>
        </View>
      </View>
    </>
  );
}

export default MsgActionPup;
